<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

// u5bfcu5165u667au80fdu5bf9u8bddu7ec4u4ef6
const props = defineProps({
  title: {
    type: String,
    default: 'AIu667au80fdu5bf9u8bdd'
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  inputs: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'message-end', 'json-extracted'])

const dialogVisible = ref(props.modelValue)

// u76d1u542cu5bf9u8bddu6846u53efu89c1u6027u53d8u5316
const handleVisibleChange = (val: boolean) => {
  dialogVisible.value = val
  emit('update:modelValue', val)
}

// u76d1u542cprops.modelValueu53d8u5316
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal
  }
)

// u5904u7406JSONu63d0u53d6u4e8bu4ef6
const handleJsonExtracted = (jsonData: any) => {
  console.log('u667au80fdu5bf9u8bddu6846: u63d0u53d6u5230JSONu6570u636e', jsonData)
  // u5411u7236u7ec4u4ef6u4f20u9012JSONu6570u636e
  emit('json-extracted', jsonData)
}

// u5904u7406u4f1au8bddu7ed3u675fu4e8bu4ef6
const handleMessageEnd = (result: any) => {
  console.log('u667au80fdu5bf9u8bddu6846: u4f1au8bddu7ed3u675f', result)

  // u5c06u7ed3u679cu4f20u9012u7ed9u7236u7ec4u4ef6
  emit('message-end', {
    message: result.message,
    jsonData: result.jsonData
  })
}
</script>

<template>
  <ElDialog
    v-model="dialogVisible"
    :title="title"
    width="70%"
    :before-close="() => handleVisibleChange(false)"
    @update:modelValue="handleVisibleChange"
    destroy-on-close
    append-to-body
    class="intelligent-chat-dialog"
  >
    <!-- u5bf9u8bddu9875u9762 -->
    <div class="chat-container">
      <!-- u5f15u5165u81eau5b9au4e49u7684u667au80fdu5bf9u8bddu7ec4u4ef6 -->
      <div class="embedded-chat">
        <!-- u6d4bu8bd5u4ee3u66ffu7ec4u4ef6uff0cu6f14u793au65b9u4fbf -->
        <div class="dummy-chat">
          <div class="dummy-header">
            <h3>u667au80fdu52a9u624b</h3>
          </div>
          <div class="dummy-messages">
            <div class="dummy-message assistant">
              <div class="avatar"></div>
              <div class="content"
                >u4f60u597duff01u6211u662fu667au80fdu52a9u624buff0cu53efu4ee5u56deu7b54u4f60u7684u95eeu9898u3002</div
              >
            </div>
            <div class="dummy-message user">
              <div class="content"
                >u8bf7u4ecbu7ecdu4e00u4e0bu5f53u524du7cfbu7edfu7684u7535u8d39u5f02u5e38u8bc6u522bu529fu80fd</div
              >
              <div class="avatar"></div>
            </div>
            <div class="dummy-message assistant">
              <div class="avatar"></div>
              <div class="content">
                u7535u8d39u5f02u5e38u8bc6u522bu529fu80fdu662fu672cu7cfbu7edfu7684u6838u5fc3u529fu80fdu4e4bu4e00uff0cu80fdu591fu81eau52a8u5206u6790u7535u8d39u6570u636euff0cu8bc6u522bu51fau4ee5u4e0bu5f02u5e38u60c5u51b5uff1a<br /><br />
                1.
                u7535u91cfu5f02u5e38uff1au5982u7a81u7136u589eu9ad8u6216u964du4f4eu7684u7528u7535u91cf<br />
                2.
                u7535u8d39u5f02u5e38uff1au5982u8ba1u7b97u9519u8befu6216u4e0eu5386u53f2u8d39u7387u4e0du7b26<br />
                3. u65f6u6bb5u7535u91cfu5f02u5e38uff1au5404u65f6u6bb5u7528u7535u7387u5f02u5e38<br /><br />
                u7cfbu7edfu4f1au81eau52a8u751fu6210u5f02u5e38u62a5u544auff0cu5e76u63d0u4f9bu6574u6539u5efau8baeu3002u4f60u53efu4ee5u5728u300cu7535u8d39u5f02u5e38u300du83dcu5355u4e2du67e5u770bu6240u6709u5f02u5e38u6570u636eu3002
              </div>
            </div>
          </div>
          <div class="dummy-input">
            <input type="text" placeholder="u8bf7u8f93u5165u60a8u7684u95eeu9898..." disabled />
            <button>u53d1u9001</button>
          </div>
        </div>
      </div>
    </div>
  </ElDialog>
</template>

<style lang="scss" scoped>
.intelligent-chat-dialog {
  :deep(.el-dialog__body) {
    padding: 0 !important;
  }
}

.chat-container {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.embedded-chat {
  width: 100%;
  height: 100%;
  background-color: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
}

/* u6f14u793au7528u7684u865au62dfu5bf9u8bddu6846u6837u5f0f */
.dummy-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .dummy-header {
    padding: 16px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;

    h3 {
      margin: 0;
      color: #333;
      font-size: 18px;
    }
  }

  .dummy-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .dummy-message {
      display: flex;
      align-items: flex-start;

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ddd;
        flex-shrink: 0;
      }

      .content {
        padding: 12px 16px;
        border-radius: 8px;
        max-width: 80%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        line-height: 1.5;
      }

      &.assistant {
        .avatar {
          margin-right: 12px;
          background-color: #10b981;
        }

        .content {
          background-color: #fff;
          border-radius: 0 8px 8px 8px;
          border: 1px solid #e0e0e0;
        }
      }

      &.user {
        flex-direction: row-reverse;

        .avatar {
          margin-left: 12px;
          background-color: #1677ff;
        }

        .content {
          background-color: #e6f6ff;
          border-radius: 8px 0 8px 8px;
        }
      }
    }
  }

  .dummy-input {
    display: flex;
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;

    input {
      flex: 1;
      padding: 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      outline: none;
      font-size: 14px;

      &::placeholder {
        color: #999;
      }
    }

    button {
      margin-left: 8px;
      padding: 0 16px;
      height: 42px;
      background-color: #1677ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background-color: #1668dc;
      }
    }
  }
}
</style>
